<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="/css/ksd.css"/>
</head>
<body>
<div id="app">
    <div id="courseListBox" class="course_bdleft course-block  Mtp25">
        <div class="text-center mt-5">
            <h1 class="fz32 fw">学相伴微信支付V3-Native系列</h1>
            <input type="hidden" ref="registration" value="${registration.id}" id="id">

            <img id="img" width="250" alt="">
            <h3>你购买的课程是：${registration.officeName}，价格是：￥${registration.price}</h3>
            <p>已经等待了:{{count}}秒</p>
        </div>
    </div>
</div>
<script type="text/javascript" src="/js/vue.min.js"></script>
<script type="text/javascript" src="/js/axios.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            id: "",
            count:100,
            ssrc:"",
            wxpayurl:"/app/pay-user-order-registration/paySuccess/",
        },
        created()
        {
            this.id = document.getElementById("id").value;
            axios.get("wxpay?registrationId="+document.getElementById("id").value,{ headers:
                    {
                        'Authorization': "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2NTczNzc2MjksInVzZXJJZCI6Im9PTjVBNmNoY1JGUDNmdVNVeHo3VjBlWWdZYTgiLCJpYXQiOjE2NTU0NDkzNjd9.OqHC4CHhZ7WO8H1QO7slIvR___Wy_o8pNJrbKU0xZVA"
                    }}).then(function (res)
            {
                console.log(res);
                if(res.data.code == 200)
                {

                    var url = "data:image/png;base64,";
                    //获取图片直接-拼接base64
                    document.getElementById("img").src = url+ res.data.data.rows;

                    // this.ssrc = res.data.data.rows;
                }
            }).catch(err=>
            {
                console.log(err)
            });

            // 1： 轮询监听用户是否支付成功!
            this.intervalcallback();
        },

        methods:
        {
            // 1 : 用户支付成功回调监听
            listenerCallback()
            {

                var that = this;
                if(that.count<=0)
                {
                    alert("支付超时");
                    //刷新这个页面
                    window.location.href = window.location.href;
                    return;
                }
                that.count--;
                axios.get("/app/pay-user-order-registration/paySuccess?registrationId="+this.id).then(function (res)
                {
                    if(res.data.code == 200)
                    {
                        if (that.timer) clearInterval(that.timer);
                        alert("支付成功!!");
                    }
                }).catch(err=>
                {
                    console.log(err)
                });
            },
            intervalcallback()
            {
                var that = this;
                if (that.timer) clearInterval(that.timer);
                //每隔三秒查询
                that.timer = setInterval(this.listenerCallback, 1000);
            }
        }
    })

</script>
</body>
</html>
